<template>
	<div class="wenzhangguanli">
		<div class="right">
			<div class="topNav"><i class="el-icon-news"></i><p>&nbsp;文章管理</p></div>
			
			<div class="rigth_bottom">
				<!--头部按钮部分-->
				<div class="btn">
					<div class="dd1">
						<el-button type="primary" icon="el-icon-plus">添加</el-button>
						<el-button type="primary" icon="el-icon-delete">删除</el-button>
						<el-button type="primary" icon="el-icon-goods">锁定</el-button>
						<el-dropdown>
							<el-button type="primary">
							    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
							    <el-dropdown-item><i class="el-icon-delete"></i>&nbsp;注销</el-dropdown-item>
							    <el-dropdown-item><i class="el-icon-view"></i>&nbsp;查看</el-dropdown-item>
							    <el-dropdown-item><i class="el-icon-success"></i>&nbsp;授权</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					
					<div class="dd2">
						<el-input  placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input1"></el-input>
						<el-button type="primary" icon="el-icon-search" @click="layui_sousuo">搜索</el-button>
						
						<el-popover
						  placement="bottom"
						  width="250"
						  height='500'
						  v-model="visible2"
						  trigger="click">
						  <ul>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">文章标题</p><el-input v-model="input" placeholder="输入文章标题" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">发布状态</p><el-input v-model="input" placeholder="输入发布状态" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">文章标签</p><el-input v-model="input" placeholder="输入文章标签" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right:40px;">作者</p><el-input v-model="input" placeholder="输入作者" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;justify-content: space-around;">
						    	<el-button type="primary" size="mini" icon="el-icon-plus">搜索</el-button>
								<el-button type="primary" size="mini" icon="el-icon-delete">重置</el-button>
								<el-button type="primary" size="mini" icon="el-icon-goods" @click="visible2 = false">取消</el-button>
						    </li>
						  </ul>
						  <el-button type="primary" slot="reference">高级搜索<i class="el-icon-arrow-down el-icon--right"></i></el-button>
						</el-popover>
						
					</div>
				</div>
				<!--数据表格部分-->
				<div class="table">
					<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
				</div>
				
				
			</div>
			
		</div>
	</div>
</template>

<script>
	export default{
		name:'wenzhangguanli',
		data(){
			return{
				visible2:false,//控制高级搜索显示和隐藏
				input:'',
				input1:'',
			}
		},
		mounted(){
			this.layui()
		},
		methods:{
			layui(){
				layui.use('table', function(){
				  	var table = layui.table;
				  	//第一个实例
				  	table.render({
					    elem: '#LAY_table_user'
					    ,id: 'testReload'
					    ,url: '../../../../../static/json/table.json' //数据接口
					    ,page: true //开启分页
					    ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
					    ,cols: [[ //表头
					    	{type:'checkbox'}
					      	,{field: 'id', title: 'ID',  sort: true}
					      	,{field: 'username', title: '用户名', width:80}
					      	,{field: 'sex', title: '性别',  sort: true}
					      	,{field: 'city', title: '城市',} 
					      	,{field: 'sign', title: '签名',}
					      	,{field: 'experience', title: '积分',  sort: true}
					      	,{field: 'score', title: '评分',  sort: true}
					      	,{field: 'classify', title: '职业',}
					      	,{field: 'wealth', title: '财富',  sort: true}
					    ]]
					});
					//监听表格复选框选择
					table.on('checkbox(demo)', function(obj){
					    console.log(obj)
					});
					
					
					
					
				});
			},
			//点击搜索
			layui_sousuo(){
				let table = layui.table;
				let input1 = this.input1
				
			    //执行重载
			    table.reload('testReload', {//testReload你要重新渲染哪个表格
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			            id: input1,
			        }
			    });
				
			},
			
			
			
		},
	}
</script>

<style scoped="scoped" lang="scss">
	.wenzhangguanli{
		width: 98%;height: 95%;padding: 10px;background: #f2f2f2;min-width: 1000px;
		.right{
			background:white;height:100%;width: 99%;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-news{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			.rigth_bottom{
				margin: 10px;
				.btn{
					display: flex;justify-content: space-between;
					.dd2{
						display: flex;
						.dd2_1{margin-right: 5px;}
					}
				}
				.table{margin-top: 20px;border: 1px solid #ddd;}
			}
		}
	}
</style>